<template>
    <div>
        <div style="position: fixed;top:-100px">
            <canvas id="upload-canvas" style="display:none"></canvas>

            <input type="file" name="file" multiple :id="'tgUploadFileInput' + domId" @change="changeHandle"
                   v-if="maxSelect > 1"/>
            <input type="file" name="file" :id="'tgUploadFileInput' + domId" @change="changeHandle"
                   v-if="maxSelect <= 1"/>
        </div>
    </div>
</template>

<script>
    // <Upload ref="upload" class="file-uploader" :maxSelect="1" @on-upload-success="uploadSuccess"></Upload>
    // @click="$refs.upload.choiceFile()"
    import './exif'
    import http from './http'
    import MegaPixImage from './megapix-image'
    import qiNiuUploadBase64 from './qiniuUploadBase64'
    import {mapGetters} from "vuex"
    import * as types from "../../store/mutations-type"

    export default {
        name: 'upload',
        props: {

            multiple: {
                type: Boolean,
                default: false
            },
            showProgress: {
                type: Boolean,
                default: true
            },
            maxSelect: {
                type: Number,
                default: 9
            },
            onUploadSuccess: {
                type: Function,
                require: true
            },
            api: {
                type: String,
                default: 'http://47.106.189.58:8080/file/upload_image'
            }
        },

        data() {
            return {el: null, files: [], doneCount: 0, option: {}, domId: Math.random().toString().substring(2, 4)}
        },
        computed: {
            ...mapGetters(['imgHeader'])
        },
        mounted() {
            this.el = document.getElementById("tgUploadFileInput" + this.domId);
        },

        methods: {
            // 选择文件
            choiceFile() {
                return this.el.click();
            },

            // 文本框内容改变
            changeHandle(e) {
                let files = e.target.files || e.dataTransfer.files;
                if (files.length === 0) return;
                for (let i in files) {
                    if (i === "length") return;
                    this.files.push({name: files[i].name, result: "准备上传", percent: 0});
                    this.startUpload(files[i], i);
                }
            },

            // 开始上传
            startUpload(file, index) {
                let that = this;
                EXIF.getData(file, function () {
                    let orient = EXIF.getTag(this, "Orientation");
                    let mpImg = new MegaPixImage(file);
                    let canvas = document.getElementById("upload-canvas");
                    mpImg.render(canvas, {maxWidth: 1000, maxHeight: 1000, orientation: orient}, () => {
                        that._qiNiuUploadBase64(canvas.toDataURL("image/jpg"), index);
                    });
                });
            },

            // 上传至服务器
            // _httpUploadBase64(Base64, index) {
            //     let that = this;
            //     //store中取imgToken
            //     let token = this.$store.state.uploadImgInfo.token
            //     let url = this.$store.state.uploadImgInfo.url
            //     console.log(this.$store.state)
            //     http({
            //         url: url,
            //         data: {base64File: Base64},
            //         token: token,
            //         onSuccess: (response) => {
            //             console.log(response)
            //             response.url = response.data.url;
            //             that.$emit("on-upload-success", response);
            //             if ((++this.doneCount) == this.files.length) {
            //                 this.files = [];
            //                 this.doneCount = 0;
            //
            //             }
            //         },
            //         onProgress: (percent) => {
            //             that.files[index].result = percent.toFixed(0) + "%";
            //             that.files[index].percent = percent.toFixed(0) + "%"
            //         },
            //
            //         onError: (e) => {
            //             that.files[index].result = "上传失败";
            //             if ((++this.doneCount) == this.files.length) {
            //                 this.files = [];
            //                 this.doneCount = 0;
            //             }
            //         }
            //     })
            // },
            //上传到七牛云
            _qiNiuUploadBase64(base64, index) {
                // this.$store.dispatch(types.GET_QINIU_TOKEN).then(res => {
                //     if (res.code !== 1) return
                //     let token = res.data.token
                //     let url = res.data.url
                //     qiNiuUploadBase64(base64.replace(/^data:image\/(\w+);base64,/, ""), {
                //         url: url,
                //         token: token,
                //         onSuccess: (response) => {
                //             let url = this.imgHeader.qiNiuUrl + response.key
                //             response.url = this.option.domain + response.name;
                //             this.$emit("on-upload-success", {url, response});
                //             if ((++this.doneCount) == this.files.length) {
                //                 this.files = [];
                //                 this.doneCount = 0;
                //                 utils.toast.clear();
                //             }
                //         },
                //         onProgress: (percent) => {
                //             this.files[index].result = percent.toFixed(0) + "%";
                //             this.files[index].percent = percent.toFixed(0) + "%"
                //         },
                //         onError: (e) => {
                //             this.files[index].result = "上传失败";
                //             if ((++this.doneCount) == this.files.length) {
                //                 this.files = [];
                //                 this.doneCount = 0;
                //                 this.toast.clear();
                //             }
                //         }
                //     });
                // })


            },

            // 停止上传
            uploadCancel() {

            },

            // 上传成功
            uploadSuccess() {

            },

            // 上传失败
            uploadError() {

            },
        }
    }
</script>
<style>
    .upload-canvas {
        display: none
    }
</style>

